<template>
  <view class="scl-before-result-page">
    <navigationBar :emitBackEvent="true" @backEvent="backHandle" :my-property="navigationBarDataInfo"/>
    <view class="main-wrapper">
      <view 
        class="top-img"
        :style="[
          {'background-image':(`url(${staticImgs.topImg})`)}
        ]"
      >
        <view class="tit">{{tit}}</view>
      </view>
      
      <view class="main-box-wrapper-position">
        
        <view class="main-box-wrapper">
          <view class="deco-tit">
            <image class="img" :src="staticImgs.boxTitImg" mode=""></image>
          </view>
          <view class="main-box">
            <view class="desc-item" v-for="(item,index) in descList" :key="index">            
              <view class="label">{{item.name}}</view>
              <view class="progress">
                <lxProgressBar
                  v-if="item.showBar"
                  backColor="#E2E2E2"
                  contentColor="#788EFF"
                  barRadius="18rpx"
                  :total="10"
                  barHeight="30rpx"
                  :first-value="10"
                  animation
                />
                <image class="status-icon" :class="{ 'visible': item.statusDone, 'hidden': !item.statusDone }"  :src="staticImgs.okIcon" mode=""></image>
              </view>
            </view>
          </view>
        </view>
      
      </view>
      
    </view>
  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue";
  import lxProgressBar from '@/subcontractorD/components/lx-progress-bar/components/lx-progress-bar/lx-progress-bar.vue'
  export default {
    components: {
      navigationBar,
      lxProgressBar
    },
    props:{
      tit:{
        type:String,
        default:''
      },
      isMBTI:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        navigationBarDataInfo:{
        	"bg_color": "#fff",
        	"color": "#333",
        	"flag": 1,
        	"name": "前往详细解读",
          "hasEntity":true,
        },
        staticImgs:{
          okIcon:this.imgBaseURL + '/scl/scl-before-result-page/ok-icon.png',
          topImg: this.imgBaseURL + '/scl/scl-before-result-page/top-img.png',
          boxTitImg: this.imgBaseURL + '/scl/scl-before-result-page/box-tit.png',
        },
        descList:[
          {
            name:'总体图表生成中',
            showBar:true,
            statusDone:true,
          },
          {
            name:'维度结果分析中',
            showBar:false,
            statusDone:false,
          },
          {
            name:'大数据对比计算中',
            showBar:false,
            statusDone:false,
          },
          {
            name:'正在获得针对性提升建议',
            showBar:false,
            statusDone:false,
          },
          {
            name:'正在生成专业应对方式',
            showBar:false,
            statusDone:false,
          }
        ],
        timeout1: null,
        timeout2: null,
        timeout3: null
      }
    },
    mounted() {
      this.timeout1 = setTimeout(()=>{
        this.updateBarStatus()
      },1500)
    },
    beforeDestroy() {
      clearTimeout(this.timeout1)
      clearTimeout(this.timeout2)
      clearTimeout(this.timeout3)
    },
    methods:{
      backHandle(){
        if(this.isMBTI){
          uni.setStorageSync('mbtiModalVisible',true)
        }
        
        uni.reLaunch({
          url:'/pages/sclList/sclList'
        })
      },
     updateBarStatus(){
       let flag = false
       let lastIndex = 0
        for (let i = 0; i < this.descList.length; i++) {
          if(!this.descList[i].showBar){
            this.descList[i].showBar = true
            flag = true
            lastIndex = i
            break
          }
          if(!this.descList[i].statusDone){
            this.descList[i].statusDone = true
            if(this.descList[i+1]){
              this.descList[i+1].showBar = true
            }
            lastIndex = i
            flag = true
            break
          }
        }
        
        let maxLength = this.descList.length - 1
        if(flag && !this.descList[maxLength].statusDone){
          this.timeout2 = setTimeout(()=>{
            this.updateBarStatus()
          },1000)
        }else{
          this.timeout3 = setTimeout(()=>{
            this.$emit('loadOk')
          },500)
        }
     } 
    },
  }
</script>

<style lang="scss" scoped>
  
  .scl-before-result-page{
    background-color: #F7F7F7;
    height: 100vh;
    width: 100vw;
  }
  
  .main-wrapper{
    position: relative;
    .top-img{
      width: 750rpx;
      height: 516rpx;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      align-items: flex-end;
      justify-content: center;
      display: flex;
      

      .tit{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 36rpx;
        color: #333333;
        line-height: 50rpx;
        text-align: left;
        font-style: normal;
        
        margin-bottom: 128rpx;
      }
    }
    
    .main-box-wrapper-position{
      position: absolute;
      top: 454rpx;
      left: 0;
      right: 0;
      .main-box-wrapper{
        position: relative;
        
        .deco-tit{
          position: absolute;
          top: -36rpx;
          left: 50%;
          transform: translateX(-50%);
          .img{
            width: 480rpx;
            height: 70rpx;
          }
        }
        
        .main-box{
          padding: 85rpx 24rpx 0 24rpx;
          box-sizing: border-box;
          width: 700rpx;
          height: 489rpx;
          background: #FFFFFF;
          border-radius: 10rpx;
          margin: auto;
          
          display: flex;
          flex-direction: column;
          row-gap: 40rpx;
          
          .desc-item{
            // background-color: red;
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            
            .label{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 30rpx;
              color: #333333;
              line-height: 42rpx;
              text-align: justify;
              font-style: normal;  
            }
            
            .progress{
              width: 300rpx;
              height: 30rpx;
              background: #E2E2E2;
              border-radius: 18rpx;
              position: relative;
              
              .status-icon{
                width: 50rpx;
                height: 50rpx;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
              }
              
              .hidden {
                opacity: 0;
              }
              
              .visible {
                opacity: 1;
                transition: opacity 0.5s ease; /* 添加过渡效果 */
              }
              
            }
            
            
            
          }
        }
      }  
    }
    
    
  }
</style>